<template>
    <div class="collarUse">
        <div class="headerBreadcrumb">
            <header-breadcrumb :breadcrumbItem="breadcrumbItem"></header-breadcrumb>
        </div>
        <div class="tableContent">
            <div class="title">已选耗材</div>
            <item-card  v-for="(item,index) in tableData" :key="index" :item='item' :defaultProp="defaultProp" ></item-card>
        </div>
        <div class="submit">
                <el-form  :model="ruleForm" label-width='110px' ref="ruleForm" @submit.native.prevent>
                         <el-form-item  label="选择部门：" prop="re_dept_id" :rules="[{ required: true, message: '请选择部门', trigger: 'blur' }]">
                                 <el-select v-model="ruleForm.re_dept_id" placeholder="请选择" >
                                     <el-option v-for="item in options" :key="item.re_dept_id" :label="item.re_dept_name" :value="item.re_dept_id"></el-option>
                             </el-select>
                         </el-form-item>
                         <el-form-item prop="re_type" label="领用方式：" :rules="[{ required: true, message: '请选择方式'}]">
                            <el-radio-group v-model="ruleForm.re_type">
                                <el-radio label="1">个人使用</el-radio>
                                <el-radio label="2">部门使用</el-radio>
								<span class="helpmsg" @mouseenter="showmsg" @mouseleave="showmsg">什么是个人使用？</span>
								<span class="helpmsg" @mouseenter="showmsg1" @mouseleave="showmsg1">什么是部门使用？</span>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item  label="领用原因：" prop="re_reason" :rules="[{ required: true, message: '请输入领用原因', trigger: 'blur' }]">
                            <el-input style="width:679px" type="textarea" :rows="3" v-model="ruleForm.re_reason" placeholder="请输入领用原因"></el-input>
                        </el-form-item>
                        <el-form-item style="padding:20px 0 0 100px">
                            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                             <el-button>取消</el-button>
                        </el-form-item>
						<div v-show="isShow" class="helpbox">
							<p>{{ helpmsg[0].title }}</p>
							<div v-html="helpmsg[0].content"></div>
						</div>
						<div v-show="isShow1" class="helpbox">
							<p>{{ helpmsg[1].title }}</p>
							<div v-html="helpmsg[1].content"></div>
						</div>
                </el-form>
        </div>
        <confirm-dialog @goConfirm='$router.go(-1)' ref="confirmDialog"></confirm-dialog>
    </div>
</template>
<script>
/* eslint-disable */  
import confirmDialog from "@/components/confirmDialog"
import {commitMeterialReceiveApi} from "./api"
import {getReceiveDept}  from '@/api'
import headerBreadcrumb from "@/components/headerBreadcrumb"
import itemCard from "@/components/itemCard"
export default {
    name: "collarUse",
    components:{
        headerBreadcrumb,
        itemCard,
        confirmDialog
    },
    data() {
        return{
            breadcrumbItem:[{name:'耗材领用',replace:true,path:'/myAssets'},{name:'领用',class:true},], /**头部面包屑 */
            defaultProp:['image_url','c_name','c_code','c_specs','recieveNum'],
            ruleForm: {
                re_type:'1',
                re_dept_id:'',
                re_reason: ''//领用备注
            },
            options: [],/**部门列表 */
            tableData: [],// 表格数据
            isShow: false,
			isShow1: false,
			helpmsg: [
				{
					title: '个人使用：',
					content: `
						<div>归属员工个人使用的耗材，比如员工领用的：纸笔本、等其他个人专用物品，请选择个人使用。领用后在【我的耗材】里查询记录。</div>
					`
				},
				{
					title: '部门使用：',
					content: `
						<div>归属部门成员共同使用的耗材，比如：打印纸、纸巾、纸杯等，请选择部门使用。领用后在【部门耗材】里查询记录。</div>
					`
				},
			]
        }
    },
    created(){
        this.tableData = this.$store.state.collarUseOfMeterials
        this.getUserDeptFn()
    },
    mounted(){
		
    },
    methods: {
        /**提交数据 */
        submitForm(formName){
            if(!(this.tableData&&this.tableData.length)) return this.$message({  message: '领用单为空', type: 'warning'});
            this.$refs[formName].validate((valid) => {
                if (valid) {
                   let mytableData = this.tableData.map(item=> {return {
                       re_a_id:item.re_a_id,
                       re_num:item.num,
                       c_code:item.c_code,
                       c_name:item.c_name,
                   }})
                   let param = {
                        re_type:this.ruleForm.re_type,
                        re_dept_id:this.ruleForm.re_dept_id,
                        re_reason:this.ruleForm.re_reason,
                        consumable_data:JSON.stringify(mytableData) 
                    }
                    commitMeterialReceiveApi(param).then(()=>{
                        this.$refs.confirmDialog.manager = ''
                        this.$refs.confirmDialog.type = '耗材'
                        this.$refs.confirmDialog.dialogTitle = '已成功提交领用申请，请等待审批。'
                        this.$refs.confirmDialog.dialogVisible = true
                        this.$refs.confirmDialog.textList = [
                            `如果领用为个人耗材，请在我的耗材里面查看领用记录`,
                            `如果领用为部门耗材，请在部门耗材里面查看领用记录`,
                            `耗材记为公司运营成本，请注意保管、爱护使用！`,
                        ];
                        // let that = this
                        // setTimeout(()=>{
                        //     that.$store.commit('changeCollarUseOfMeterials',[]);
                        //     that.$router.go(-1)
                        // },3000)
                    })
                } 
            });
            
        },
        /**根据userId获取用户全部部门 */
        getUserDeptFn(){
            getReceiveDept({dept_ids:this.$route.query.dept_ids,wh_id:this.$route.query.warehouses}).then(data=>{
                this.options = data
                if(data.length==1){
                    this.ruleForm.re_dept_id = data[0].re_dept_id 
                }
            })
        },
		showmsg() {
			if(this.isShow){
				this.isShow = false;
			}else {
				this.isShow = true;
			}
		},
		showmsg1() {
			if(this.isShow1){
				this.isShow1 = false;
			}else {
				this.isShow1 = true;
			}
		}
    }
}
</script>

<style lang="stylus" scoped>
.collarUse
    height 100%
    width 100%
    display flex
    flex-direction column
    .tableContent
        margin 0 0 10px 0
        padding 40px
        background-color #fff
        .title
            color: rgba(16, 16, 16, 1);
            font-size: 14px;
            padding-left 34px
            line-height : 50px;
            background-color: rgba(247, 247, 251, 1);
            margin-bottom 20px
    .submit
        background-color #fff
        padding 30px
        position relative;
        .radioName
            color: rgba(16, 16, 16, 1);
            font-size: 14px;
            margin-right 13px
        .helpmsg
            width: 112px;
            height: 20px;
            color: rgba(170, 170, 170, 1);
            font-size: 14px;
            text-align: left;
            font-family: SourceHanSansSC-regular;
            margin-left 15px;
            cursor pointer;
        .helpbox
            position absolute;
            left: 420px;
            top: 115px;
            width: 388px;
            height: 159px;
            line-height: 20px;
            border-radius: 2px 2px 2px 2px;
            background-color: rgba(250, 250, 250, 1);
            text-align: center;
            box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(255, 0, 0, 0);
            padding 16px 17px 12px 24px;
            box-sizing border-box;
            animation: show 1s;
            >p
              color: rgba(0, 0, 0, 0.54);
              margin-bottom 10px;
              font-size: 14px;
              text-align: left;
              font-family: Helvetica-regular
            >div
              color: rgba(0, 0, 0, 0.54);
              font-size: 14px;
              text-align: left;
              font-family: Helvetica-regular;
            >p:nth-of-type(1)
              font-weight bold;
  @keyframes show{
  	0%{
  	  opacity .3
  	}
  	40%{
  	  opacity .6
  	}
  	100%{
  	  opacity 1
  	}
  }

</style>
